<template>
  <div id="balance">
    <c-title :hide="false" :text="integral ? integral : '积分'"></c-title>
    <diyBackGround></diyBackGround>
    <div class="main">
      <div class="topMy">
        <div class="left">
          <div class="txt">我的{{ integral ? integral : "积分" }}</div>
          <div class="priceNum">
            {{ credit1 }}
            <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/images%2Fintegral%2Fimage1.png" alt="" />
          </div>
        </div>
        <div class="right" @click="transferHandel" v-if="transfer">转账</div>
      </div>
      <div class="integralList" v-if="dataList.length > 0">
        <div class="title">
          <div class="title_left">{{ integral ? integral : "积分" }}列表</div>
          <div class="title_Right" @click="tourl('integrallist', {})">
            查看明细
            <van-icon name="arrow" />
          </div>
        </div>
        <div class="integralLis" v-for="item in dataList" :key="item">
          <div class="top">
            <div class="txt">{{ item.source_name }}</div>
            <div class="priceNow" v-if="item.point_income_type == 1">+{{ item.point }}</div>
            <div class="priceNowAd" v-if="item.point_income_type == '-1'">{{ item.point }}</div>
          </div>
          <div class="bottom">
            <div class="time">{{ item.created_at }}</div>
            <div class="integralTotal">{{ integral ? integral : "积分" }}：{{ item.after_point }}</div>
          </div>
        </div>
      </div>
      <div class="other" v-if="other">
        <div class="title">其他功能</div>
        <div class="otherList">
          <div class="otherBox" v-for="(item, index) in other" :key="index" @click="tapOther(item, index)">
            <div class="image">
              <img :src="item.img" alt="" />
            </div>
            <div class="txt">{{ item.name }}</div>
          </div>
        </div>
      </div>
      <div class="integralTask" v-if="point_task_switch">
        <div class="title">
          <div class="left">{{ integralTaskName }}</div>
          <div class="right" v-show="listIncome">
            今日已获得
            <div class="image">
              <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/images%2Fintegral%2Fimage1.png" alt="" />
            </div>
            <div class="money">+{{ listIncome }}</div>
          </div>
        </div>
        <div class="taskConten" v-for="(item, index) in list" :key="index">
          <div class="taskImg">
            <img :src="item.icon" alt="" />
          </div>
          <div class="taskDetail">
            <div class="top">
              <div class="taksName">{{ item.name }}</div>
              <div class="moneyImg">
                <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/images%2Fintegral%2Fimage1.png" alt="" />
              </div>
              <div class="money">+{{ item.amount }}</div>
            </div>
            <div class="bottom">{{ item.sub_title }}</div>
          </div>
          <div class="btn" @click="jumpUrlBtn(item)">{{ item.button_name }}</div>
        </div>
      </div>
    </div>
    <!-- 新海报 -->
    <yz-goodsposter v-on:onEmit="onEmit" v-model="posterShow" :clear_dataURL="true" :posterData="poster_Data" :defaultImg="poster" :width="`18.875rem`" v-on:finish="uploadImageM"></yz-goodsposter>
    <!-- 新海报end -->
    <!-- 优化 -->
    <div class="content" v-if="false">
      <ul class="my_balance">
        <li class="balance_a">
          <i class="iconfont icon-wealth-b"></i><span>我的{{ integral ? integral : "积分" }}</span>
        </li>
        <li class="balance_b">{{ credit1 }}</li>
      </ul>
      <ul class="list_box">
        <li @click="transferHandel" v-if="transfer">
          <i class="iconfont icon-balance_c"></i>转账
          <i class="fa fa-angle-right"></i>
        </li>
      </ul>
      <ul class="list_box_b">
        <li @click="toIntegral" v-if="activity">
          <i class="iconfont icon-balance_l"></i>{{ integral ? integral : "积分" }}活动
          <i class="fa fa-angle-right"></i>
        </li>
        <li @click="toIntegralBlueCattle" v-if="lan_plugin">
          <i class="iconfont icon-fontclass-lanniujifen" style="font-size: 1.2rem; padding-left: 6px; padding-right: 6px;"></i>{{ lan_name ? lan_name : "蓝牛积分" }}
          <i class="fa fa-angle-right"></i>
        </li>
        <li @click="to_transfer_integral" v-if="transfer_integral">
          <i class="iconfont icon-pay_default" style="font-size: 1.2rem; padding-left: 6px; padding-right: 6px;"></i
          >{{transfer_integral_text}}
          <i class="fa fa-angle-right"></i>
        </li>
      </ul>
      <ul class="list_box_b">
        <li @click="to_love_member" v-if="exchange_to_love_by_member">
          <i class="iconfont icon-jifen" style="font-size: 1.2rem; padding-left: 6px; padding-right: 6px;"></i>{{ point_name }}转化{{ love }}
          <i class="fa fa-angle-right"></i>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import member_integral_v2Controller from "./member_integral_v2Controller";

export default member_integral_v2Controller;
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
#balance {
  .pobox {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;

    .txt {
      justify-content: center;
      display: flex;
      font-size: 1.0625rem;
      font-weight: 400;
      color: #333;

      .inte {
        color: #f20505;
      }
    }

    .btn {
      margin: 0 auto;
      margin-top: 2rem;
      width: 6.5rem;
      height: 2.125rem;
      border-radius: 0.3125rem;
      background: #ffc11f;
      line-height: 2.125rem;
      text-align: center;
    }
  }

  .main {
    padding: 0 0.625rem;
    margin-top: -8rem;
    padding-bottom: 1rem;

    .integralTask {
      margin-top: 0.5rem;
      background: #fff;
      border-radius: 20px;
      padding: 1rem 1rem 1rem 1rem;

      .taskConten {
        height: 2.75rem;
        display: flex;
        align-items: center;
        margin: 0.75rem 0;

        .btn {
          max-width: 8rem;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          -webkit-flex-shrink: 0;
          -ms-flex-negative: 0;
          flex-shrink: 0;
          padding: 0.2188rem 0.9375rem;
          background: var(--themeBaseColor);
          border-radius: 0.3125rem;

          /* line-height: 2.125rem; */
          text-align: center;
          font-size: 0.875rem;
          color: #fff;
          flex-shrink: 0;
        }

        .taskDetail {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          margin-left: 0.5rem;
          flex: 1;

          .bottom {
            font-size: 0.625rem;
            color: #999;
            text-align: left;
            flex: 1;
          }

          .top {
            flex: 1;
            display: flex;
            align-items: center;
            text-align: left;
            font-size: 0.875rem;

            .moneyImg {
              width: 1rem;
              height: 1rem;

              img {
                width: 100%;
                height: 100%;
              }
            }

            .money {
              font-size: 0.625rem;
              color: #f20606;
            }
          }
        }

        .taskImg {
          flex-shrink: 0;
          width: 2.75rem;
          height: 2.75rem;
          border-radius: 100%;

          img {
            width: 100%;
            height: 100%;
            border-radius: 100%;
          }
        }
      }

      .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.3125rem;

        .left {
          font-size: 1rem;
          font-weight: bold;
          color: #333;
        }

        .right {
          display: flex;
          align-items: center;
          font-size: 0.75rem;
          color: #333;
          font-weight: 400;

          .money {
            font-size: 0.75rem;
            font-weight: 400;
            color: #f20606;
          }

          .image {
            width: 1rem;
            height: 1rem;

            img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }

    .other {
      background: #fff;
      border-radius: 20px;
      padding: 1rem;
      margin-top: 0.5rem;

      .otherList {
        display: flex;
        flex-wrap: wrap;

        .otherBox {
          width: 25%;
          display: flex;
          align-items: center;
          justify-content: flex-start;
          align-items: center;
          flex-direction: column;
          padding: 0 0.1563rem;
          // margin-right: 0.8rem;
          .txt {
            width: 100%;
          }

          .image {
            width: 1.5938rem;
            height: 1.4688rem;
            margin-bottom: 0.7188rem;

            img {
              width: 100%;
              height: 100%;
            }
          }
        }

        .otherBox:nth-child(4n) {
          margin-right: 0;
        }
      }

      .title {
        font-size: 1rem;
        font-weight: bold;
        color: #333;
        margin-bottom: 0.625rem;
        text-align: left;
      }
    }

    .integralList {
      margin-top: 0.5rem;
      padding: 1rem;
      border-radius: 0.625rem;
      background: #fff;

      .integralLis {
        display: flex;
        flex-direction: column;
        padding-bottom: 1rem;

        .top,
        .bottom {
          flex: 1;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }

        .txt {
          font-weight: 500;
          color: #333;
          font-size: 0.8125rem;
        }

        .priceNow {
          font-size: 0.875rem;
          color: #f20606;
        }

        .priceNowAd {
          font-size: 0.875rem;
          color: #259b24;
        }

        .time,
        .integralTotal {
          font-size: 0.75rem;
          color: #999;
          font-weight: 400;
        }

        .top {
          margin-bottom: 0.5rem;
        }
      }

      .integralLis:last-child {
        padding-bottom: 0;
      }

      .title {
        display: flex;
        justify-content: space-between;
        margin-bottom: 1rem;

        .title_left {
          font-size: 1rem;
          font-weight: bold;
          color: #333;
        }

        .title_Right {
          display: flex;
          font-weight: 400;
          font-size: 0.6875rem;
          align-items: center;
          color: #878787;
        }
      }
    }

    .topMy {
      height: 5.125rem;
      background: #fff;
      border-radius: 0.625rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 1rem;

      .right {
        width: 5.5rem;
        height: 2.125rem;
        background: var(--themeBaseColor);
        border-radius: 0.3125rem;
        text-align: center;
        line-height: 2.125rem;
        font-size: 0.75rem;
        color: #fff;
      }

      .left {
        text-align: left;

        .txt {
          font-size: 0.75rem;
          color: #666;
        }

        .priceNum {
          display: flex;
          font-size: 1.5rem;

          img {
            margin-bottom: 0.25rem;
            margin-left: 0.25rem;
            width: 1rem;
            height: 1rem;
          }
        }
      }
    }
  }

  .content {
    .my_balance {
      background: #fff;
      padding: 0.625rem 0;

      .balance_a {
        line-height: 2.5rem;
        display: flex;
        justify-content: center;
        align-items: center;

        .icon-wealth-b {
          background: url("https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/memberV2/member_a(18).png") no-repeat center;
          background-size: 1.125rem;
          width: 1.125rem;
          height: 1.125rem;
          margin-right: 0.375rem;
        }

        .icon-wealth-b::before {
          content: "";
        }

        span {
          font-size: 14px;
        }
      }

      .balance_b {
        line-height: 3.75rem;
        font-size: 36px;

        small {
          font-size: 24px;
        }
      }
    }

    .list_box,
    .list_box_b {
      background: #fff;

      //border-bottom: solid 0.0625rem #ebebeb;
      li {
        padding-left: 0.875rem;
        border-top: solid 0.0625rem #ebebeb;
        //border-bottom: solid 0.0625rem #ebebeb;
        padding-right: 0.875rem;
        display: flex;
        align-items: center;
        line-height: 2.875rem;
        font-size: 16px;
        position: relative;

        .icon-balance_a {
          color: #6cbf6a;
        }

        .icon-balance_b {
          color: #fac337;
        }

        .icon-balance_c {
          color: #069ce7;
        }

        .icon-balance_l {
          color: #f27435;
        }

        .iconfont {
          font-size: 2rem;
          margin-right: 0.375rem;
        }

        .fa {
          position: absolute;
          top: 0;
          right: 0.875rem;
          font-size: 1.5rem;
          color: #ccc;
          line-height: 2.875rem;
        }
      }

      li:last-child {
        border-bottom: solid 0.0625rem #ebebeb;
      }
    }

    .list_box_b {
      margin-top: 10px;
    }
  }
}

button {
  width: 90%;
  height: 2.875rem;
  font-size: 16px;
  margin-bottom: 12px;
}

// i {
//   font-size: 4.375rem;
//   color: #ffd147;
// }

.my-banlance {
  margin: 1.25rem 0;
  font-size: 14px;
  color: #333;
  line-height: 2rem;
}

.my-banlance span {
  font-size: 14px;
  color: #333;
  margin-top: 0.625rem;
}

.my-banlance span b {
  font-size: 24px;
}
</style>
